<template>
    <div class="header-container flex align-items-center" :style="{background:props.siteInfo.color}">
        <div class="avatar-box">
            <img v-if="props.siteInfo.logo"
                 :src="props.siteInfo.logo"
                 alt=""/>
            <img v-else
                 :src="serviceImg"
                 alt=""/>
        </div>
        <div class="info flex-grow-1">
            <div class="title">{{props.siteInfo.title}}正在为您服务</div>
            <div class="phone">{{props.siteInfo.phone}}</div>
        </div>
        <div @click="handlePlaySound" class="audio" :class="{close:!props.playSound}">
            <img :src="audio" alt=""/>
        </div>
    </div>
</template>

<script setup>
    import {defineProps, defineEmits} from 'vue';
    import audio from '@/assets/audio.png';
    import serviceImg from '@/assets/service.jpeg';

    const props = defineProps({
        siteInfo: Object,
        playSound: Boolean
    });
    const emits = defineEmits(['handlePlaySound']);
    const handlePlaySound = () => {
        emits('handlePlaySound', !props.playSound);
    }
</script>

<style scoped lang="less">
    .header-container {
        padding: 0 15px;
        height: 60px;
        background: #5d9afe;

        .avatar-box {
            width: 34px;
            height: 34px;

            img {
                width: 34px;
                height: 34px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
            }
        }

        .info {
            color: #fff;
            font-size: 14px;
            padding-left: 15px;

            .phone {
                margin-top: 5px;
                font-size: 12px;
            }
        }

        .audio {
            position: relative;
            width: 20px;
            height: 20px;
            cursor: pointer;

            &.close {
                &::before {
                    content: '';
                    width: 22px;
                    height: 2px;
                    background: #fff;
                    display: block;
                    position: absolute;
                    top: 50%;
                    margin-top: -1px;
                    left: 50%;
                    margin-left: -11px;
                    -webkit-transform: rotate(45deg);
                    -moz-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                    -o-transform: rotate(45deg);
                    transform: rotate(45deg);
                }
            }

            img {
                width: 20px;
            }
        }
    }
</style>